// Flex grid

// generates the grid main container
@mixin generate-grid-container ($grid-container-class-name, $gutter-width) {

    .#{$grid-container-class-name} {
        padding: 0 $gutter-width;
    }
}

// generates the grid column grouping container
@mixin generate-flex-column-group($class-name) {

  .#{$flex-class-name},
  .#{$grid-column-group-class-name} {
        @include experimental-value(display, flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
        @include experimental-value(display, flexbox, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
        @include experimental(flex-wrap, wrap, not -moz, -webkit, not -o, -ms, not -khtml, official);
        @include experimental(flex-direction, row, not -moz, -webkit, not -o, -ms, not -khtml, official);
        list-style: none;


        &.#{$class-name}-reverse,
        &.reverse { @include experimental(flex-direction, row-reverse, -moz, -webkit, not -o, -ms, not -khtml, official); }

        &.#{$class-name}-vertical,
        &.vertical          { @include experimental(flex-direction, column, -moz, -webkit, not -o, -ms, not -khtml, official); }

        &.#{$class-name}-vertical.#{$class-name}-reverse,
        &.vertical.reverse  { @include experimental(flex-direction, column-reverse, -moz, -webkit, not -o, -ms, not -khtml, official); }
    }
}

@mixin generate-flex-grid-utils ($class-name) {
    .#{$grid-column-group-class-name} {
        .#{$class-name}-auto {
            @include experimental(flex-basis, auto, not -moz, -webkit, not -o, -ms, not -khtml, official);
            @include experimental(flex-grow, 1, not -moz, -webkit, not -o, -ms, not -khtml, official);
        }
    }

    // Vertical align
    .push-top,
    .#{$class-name}-push-top {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    .push-bottom,
    .#{$class-name}-push-bottom {
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -moz-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    .push-middle,
    .#{$class-name}-push-middle {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-align-self: flex-center;
        -ms-flex-item-align: center;
        align-self: center;
    }

    .push-left,
    .#{$class-name}-push-left {
        @include experimental(justify-content, flex-start, -moz, -webkit, not -o, -ms, not -khtml, official);
        @include experimental(flex-pack, start, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
        float: left;
    }

    .push-center,
    .#{$class-name}-push-center {
        float: none !important;
        @include experimental(justify-content, center, -moz, -webkit, not -o, -ms, not -khtml, official);
        @include experimental(flex-pack, center, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
        margin-left: auto;
        margin-right: auto;
    }

    .push-right,
    .#{$class-name}-push-right {
        @include experimental(justify-content, flex-end, -moz, -webkit, not -o, -ms, not -khtml, official);
        @include experimental(flex-pack, end, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
        float: right;
    }

}

@mixin grid-flex-order($class-name: null) {
  @if $class-name != null {
      $i: 1;
      @while $i <= 10 {
        .#{$class-name}-order-#{$i} {
          order: #{$i};
          -ms-flex-order: #{$i};
          $i: $i + 1;
        }
      }
  }
  @if $class-name == null {
     $i: 1;
      @while $i <= 10 {
        .order-#{$i} {
          order: #{$i};
          -ms-flex-order: #{$i};
          $i: $i + 1;
        }
      }
  }
}

.grid-order {
  flex: 100%;
}

@mixin generate-flex-column-group-gutters($class-name,$gutter-width) {
    .#{$grid-column-group-class-name}.#{$grid-gutters-class-name} {
        margin-left: $gutter-width * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: $gutter-width;
            margin-bottom: $gutter-width;
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-horizontal-gutters-class-name} {
        margin-left: $gutter-width * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: $gutter-width;
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: $gutter-width;
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-double-gutters-class-name} {
        margin-left: ($gutter-width * 2) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ($gutter-width * 2);
            margin-bottom: ($gutter-width * 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-double-horizontal-gutters-class-name} {
        margin-left: ($gutter-width * 2) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ($gutter-width * 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-double-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: ($gutter-width * 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-half-gutters-class-name} {
        margin-left: ( $gutter-width / 2 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 2);
            margin-bottom: ( $gutter-width / 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-half-horizontal-gutters-class-name} {
        margin-left: ( $gutter-width / 2 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-half-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: ( $gutter-width / 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-quarter-gutters-class-name} {
        margin-left: ( $gutter-width / 4 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 4);
            margin-bottom: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-quarter-horizontal-gutters-class-name} {
        margin-left: ( $gutter-width / 4 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$grid-quarter-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-gutters-class-name} {
        margin-left: $gutter-width * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 4);
            margin-bottom: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-horizontal-gutters-class-name} {
        margin-left: $gutter-width * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: $gutter-width ;
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: $gutter-width;
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-double-gutters-class-name} {
        margin-left: ($gutter-width * 2) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width * 2);
            margin-bottom: ( $gutter-width * 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-double-horizontal-gutters-class-name} {
        margin-left: ($gutter-width * 2) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width * 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-double-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: ( $gutter-width * 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-half-gutters-class-name} {
        margin-left: ( $gutter-width / 2 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 2);
            margin-bottom: ( $gutter-width / 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-half-horizontal-gutters-class-name} {
        margin-left: ( $gutter-width / 2 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-half-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: ( $gutter-width / 2);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-quarter-gutters-class-name} {
        margin-left: ( $gutter-width / 4 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 4);
            margin-bottom: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-quarter-horizontal-gutters-class-name} {
        margin-left: ( $gutter-width / 4 ) * -1;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-quarter-vertical-gutters-class-name} {
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            margin-bottom: ( $gutter-width / 4);
        }
    }

    .#{$grid-column-group-class-name}.#{$class-name}-#{$grid-no-gutters-class-name} {
        margin-left: 0;
        & > [class*=#{$class-name}-],
        & > [class*=all-],
        & > .all-auto {
            padding-left: 0;
            margin-bottom: 0;
        }
    }
}

@mixin generate-grid-helper-classes($class-name,$gutter-width) {

    .#{$class-name}-align-left {
        text-align: left;
    }
    .#{$class-name}-align-center {
        text-align: center;
    }
    .#{$class-name}-align-right {
        text-align: right;
    }

    $space-placements: (

        (null,
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        ),
        ('vertical',
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        ),
        ('horizontal',
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        ),
        ('top',
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        ),
        ('right',
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        ),
        ('bottom',
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        ),
        ('left',
            (
                (double,2),
                (half,0.5),
                ('quarter',0.25)
            )
        )
    );

    @each $placement in $space-placements {

        $position: nth($placement,1);

        @if $position == horizontal {

            .#{$position}-space {
                margin-left: $gutter-width;
                margin-right: $gutter-width;
            }

            .#{$class-name}-#{$position}-space {
                margin-left: $gutter-width;
                margin-right: $gutter-width;
            }

            .#{$position}-padding {
                padding-left: $gutter-width;
                padding-right: $gutter-width;
            }

            .#{$class-name}-#{$position}-padding {
                padding-left: $gutter-width;
                padding-right: $gutter-width;
            }

            @each $sub-division in nth($placement,2) {
                $sub-division-class-name: nth($sub-division,1);
                $sub-division-unit: nth($sub-division,2);

                .#{$sub-division-class-name}-#{$position}-space {
                    margin-left: $gutter-width * $sub-division-unit;
                    margin-right: $gutter-width * $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-#{$position}-space {
                    margin-left: $gutter-width * $sub-division-unit;
                    margin-right: $gutter-width * $sub-division-unit;
                }

                .#{$sub-division-class-name}-#{$position}-padding {
                    padding-left: $gutter-width * $sub-division-unit;
                    padding-right: $gutter-width * $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-#{$position}-padding {
                    padding-left: $gutter-width * $sub-division-unit;
                    padding-right: $gutter-width * $sub-division-unit;
                }
            }

        }

        @if $position == vertical {

            .#{$position}-space {
                margin-top: $gutter-width;
                margin-bottom: $gutter-width;
            }

            .#{$class-name}-#{$position}-space {
                margin-top: $gutter-width;
                margin-bottom: $gutter-width;
            }

            .#{$position}-padding {
                padding-top: $gutter-width;
                padding-bottom: $gutter-width;
            }

            .#{$class-name}-#{$position}-padding {
                padding-top: $gutter-width;
                padding-bottom: $gutter-width;
            }

            @each $sub-division in nth($placement,2) {
                $sub-division-class-name: nth($sub-division,1);
                $sub-division-unit: nth($sub-division,2);

                .#{$sub-division-class-name}-#{$position}-space {
                    margin-top: $gutter-width * $sub-division-unit;
                    margin-bottom: $gutter-width * $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-#{$position}-space {
                    margin-top: $gutter-width * $sub-division-unit;
                    margin-bottom: $gutter-width * $sub-division-unit;
                }

                .#{$sub-division-class-name}-#{$position}-padding {
                    padding-top: $gutter-width * $sub-division-unit;
                    padding-bottom: $gutter-width * $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-#{$position}-padding {
                    padding-top: $gutter-width * $sub-division-unit;
                    padding-bottom: $gutter-width * $sub-division-unit;
                }
            }

        }

        @if $position != horizontal and $position != vertical and $position != null {

            .#{$position}-space {
                margin-#{$position}: $gutter-width;
            }

            .#{$class-name}-#{$position}-space {
                margin-#{$position}: $gutter-width;
            }

            .#{$position}-padding {
                padding-#{$position}: $gutter-width;
            }

            .#{$class-name}-#{$position}-padding {
                padding-#{$position}: $gutter-width;
            }

            @each $sub-division in nth($placement,2) {
                $sub-division-class-name: nth($sub-division,1);
                $sub-division-unit: nth($sub-division,2);

                .#{$sub-division-class-name}-#{$position}-space {
                    margin-#{$position}: $gutter-width * $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-#{$position}-space {
                    margin-#{$position}: $gutter-width * $sub-division-unit;
                }

                .#{$sub-division-class-name}-#{$position}-padding {
                    padding-#{$position}: $gutter-width * $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-#{$position}-padding {
                    padding-#{$position}: $gutter-width * $sub-division-unit;
                }
            }
        }

        @if $position == null {

            .space {
                margin: $gutter-width;
            }

            .#{$class-name}-space {
                margin: $gutter-width;
            }

            .padding {
                padding: $gutter-width;
            }

            .#{$class-name}-padding {
                padding: $gutter-width;
            }

            @each $sub-division in nth($placement,2) {
                $sub-division-class-name: nth($sub-division,1);
                $sub-division-unit: nth($sub-division,2);

                .#{$sub-division-class-name}-space {
                    margin: $gutter-width / $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-space {
                    margin: $gutter-width / $sub-division-unit;
                }

                .#{$sub-division-class-name}-padding {
                    padding: $gutter-width / $sub-division-unit;
                }

                .#{$class-name}-#{$sub-division-class-name}-padding {
                    padding: $gutter-width / $sub-division-unit;
                }
            }
        }
    }
}

@mixin generate-visibility-classes ($breakpoint) {

    .hide-#{$breakpoint} {
        display: none !important;
    }
    .show-#{$breakpoint} {
        display: inherit !important;
    }

    table.show-#{$breakpoint} {
        display: table;
    }
    thead.show-#{$breakpoint} {
        display: table-header-group;
    }
    tbody.show-#{$breakpoint} {
        display: table-row-group;
    }
    tfoot.show-#{$breakpoint} {
        display: table-footer-group;
    }
    tr.show-#{$breakpoint} {
        display: table-row;
    }
    th.show-#{$breakpoint},
    td.show-#{$breakpoint} {
        display: table-cell;
    }
}

@mixin css-js-bridge($breakpoints) {

    @each $breakpoint in $breakpoints {

        $class-name: nth($breakpoint,1);
        $minimum-width: nth($breakpoint,2);
        $maximum-width: nth($breakpoint,3);
        $gutter-width: nth($breakpoint,4);
        $base-font-size: nth($breakpoint,5);
        $no-media-query: nth($breakpoint,6);

        @if $minimum-width and not $maximum-width {
            @media screen and (min-width: $minimum-width) {
                html {
                    &:after {
                        content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
                        display: none;
                    }
                    font-size: $base-font-size;
                }
            }
        }

        @if $minimum-width and $maximum-width {
            @media screen and (min-width: $minimum-width) and (max-width: $maximum-width) {
                html {
                    &:after {
                        content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
                        display: none;
                    }
                    font-size: $base-font-size;
                }
            }
        }

        @if not $minimum-width and $maximum-width {
            @media screen and (max-width: $maximum-width) {
                html {
                    &:after {
                        content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
                        display: none;
                    }
                    font-size: $base-font-size;
                }
            }
        }
    }
}

@mixin generate-flex-grid-divisions ($class-name) {

    // iteration counter
    $i: 5;

    // define the step size (this is the minimum column width percentage)
    $step-size: 5;

    // iterate to generate the width classes
    @while $i <= 100 {

        // generate the 33% width
        @if $i > 30 and $i <= 35 {
            .#{$class-name}-33 {
                width: 33.33333%;
                //@include experimental(flex-basis, 33.33333%, -moz, -webkit, not -o, -ms, not -khtml, official);
                @include experimental(flex-grow, 0, not -moz, -webkit, not -o, -ms, not -khtml, official);
            }
        }

        // generate the 66% width
        @if $i > 65 and $i <= 70 {
            .#{$class-name}-66 {
                width: 66.66666%;
                //@include experimental(flex-basis, 66.66666%, -moz, -webkit, not -o, -ms, not -khtml, official);
                @include experimental(flex-grow, 0, not -moz, -webkit, not -o, -ms, not -khtml, official);
            }
        }

        // generate the 5% step widths
        .#{$class-name}-#{$i} {
            width: $i * 1%;
            //@include experimental(flex-basis, $i * 1%, -moz, -webkit, not -o, -ms, not -khtml, official);
            @include experimental(flex-grow, 0, not -moz, -webkit, not -o, -ms, not -khtml, official);
        }

        // increment the counter
        $i: $i + $step-size;
    }

    .#{$class-name}-auto {
        //width: auto;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        //@include experimental(flex-basis, auto, not -moz, -webkit, not -o, -ms, not -khtml, official);
        //@include experimental(flex-grow, 1, not -moz, -webkit, not -o, -ms, not -khtml, official);
    }
}


@mixin generate-all-flex-grid-divisions () {

    // iteration counter
    $i: 5;

    // define the step size (this is the minimum column width percentage)
    $step-size: 5;

    // iterate to generate the width classes
    @while $i <= 100 {

        // generate the 33% width
        @if $i > 30 and $i <= 35 {
            .all-33 {
                width: 33.33333%;
                //@include experimental(flex-basis, 33.33333%, -moz, -webkit, not -o, -ms, not -khtml, official);
                @include experimental(flex-grow, 0, not -moz, -webkit, not -o, -ms, not -khtml, official);
            }
        }

        // generate the 66% width
        @if $i > 65 and $i <= 70 {
            .all-66 {
                width: 66.66666%;
                //@include experimental(flex-basis, 66.66666%, -moz, -webkit, not -o, -ms, not -khtml, official);
                @include experimental(flex-grow, 0, not -moz, -webkit, not -o, -ms, not -khtml, official);
            }
        }

        // generate the 5% step widths
        .all-#{$i} {
            width: $i * 1%;
            //@include experimental(flex-basis, $i * 1%, -moz, -webkit, not -o, -ms, not -khtml, official);
            @include experimental(flex-grow, 0, not -moz, -webkit, not -o, -ms, not -khtml, official);
        }

        // increment the counter
        $i: $i + $step-size;
    }

    .all-auto {
        //width: auto;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        //@include experimental(flex-basis, auto, not -moz, -webkit, not -o, -ms, not -khtml, official);
        //@include experimental(flex-grow, 1, not -moz, -webkit, not -o, -ms, not -khtml, official);
    }
}

@mixin generate-flex-grid ($breakpoints) {

    // html.flexbox {

        .#{$grid-class-name} {
          width: auto;
          max-width: $grid-max-width;
          margin: 0 auto;
        }

        @include grid-flex-order();
        @include generate-all-flex-grid-divisions();

        $all-class-names: '';

        @each $breakpoint in $breakpoints {

            $class-name: nth($breakpoint,1);
            $minimum-width: nth($breakpoint,2);
            $maximum-width: nth($breakpoint,3);
            $gutter-width: nth($breakpoint,4);
            $no-media-query: nth($breakpoint,6);
            $all-class-names: ".#{$class-name}, #{$all-class-names}";

            @if $minimum-width and not $maximum-width {
                @media screen and (min-width: $minimum-width) {
                    @include generate-grid-container($grid-class-name, $gutter-width);
                    @include generate-flex-column-group-gutters($class-name,$gutter-width);
                    @include generate-flex-grid-divisions($class-name);
                    @include generate-flex-column-group($class-name);
                    @include grid-flex-order($class-name);
                    @include generate-flex-grid-utils($class-name);
                    @include generate-grid-helper-classes($class-name,$gutter-width);
                    @include generate-visibility-classes($class-name);
                }
            }

            @if $minimum-width and $maximum-width {
                @media screen and (min-width: $minimum-width) and (max-width: $maximum-width) {
                    @include generate-grid-container($grid-class-name, $gutter-width);
                    @include generate-flex-column-group-gutters($class-name,$gutter-width);
                    @include generate-flex-grid-divisions($class-name);
                    @include generate-flex-column-group($class-name);
                    @include grid-flex-order($class-name);
                    @include generate-flex-grid-utils($class-name);
                    @include generate-grid-helper-classes($class-name,$gutter-width);
                    @include generate-visibility-classes($class-name);
                }
            }

            @if not $minimum-width and $maximum-width {
                @media screen and (max-width: $maximum-width) {
                    @include generate-grid-container($grid-class-name, $gutter-width);
                    @include generate-flex-column-group-gutters($class-name,$gutter-width);
                    @include generate-flex-grid-divisions($class-name);
                    @include generate-flex-column-group($class-name);
                    @include grid-flex-order($class-name);
                    @include generate-flex-grid-utils($class-name);
                    @include generate-grid-helper-classes($class-name,$gutter-width);
                    @include generate-visibility-classes($class-name);
                }
            }
        }
    // }
}
